import {Button, Form, Image, Input, View} from "@tarojs/components"
import {observer} from "mobx-react"
import React, {useContext} from "react"
import Taro, {useDidHide, useDidShow} from "@tarojs/taro"
import {imagesUrl} from "@/utils/baseUrl"
import LoginStore from "@/store/login"
import {registerAppUser, registerGetCode} from "@/api"
import AppStore from "@/store/app"
import MyNav from "@/components/nav"
import {toHome} from "@/utils/pageRedirect"
import {getStorage} from "@/utils/localstoreage"
import LOGOImage from "./image/watertwin_radius.png"

/**登录页Logo */
const Logo: React.FC = observer((): JSX.Element => {
	const {statusBarHeight} = useContext(AppStore)
	return (
		<View
			className={`w-245 h-100 mx-auto flex  flex-row`}
			style={{
				marginTop: `${(118 - statusBarHeight) * 2}rpx`,
				justifyContent: "center",
				alignItems: "center"
			}}
		>
			<View>
				<Image
					style={{
						width: "32px",
						height: "32px"
					}}
					src={LOGOImage}
				></Image>
			</View>
			<View
				className="text-LH font-semibold"
				style={{
					fontSize: "40rpx",
					overflow: "hidden",
					whiteSpace: "nowrap",
					textOverflow: "ellipsis",
					fontWeight: "bold",
					marginLeft: "10px",
					marginTop: "-4px",
					color: "black",
					letterSpacing: "2px"
				}}
			>
				云水镜
			</View>
			{/* <Image src={imagesUrl + '/logo.png'} className="w-137 h-59"></Image>
			 */}
		</View>
	)
})
/**登录页手机号输入框 */
const PhoneInput: React.FC = observer((): JSX.Element => {
	const {phone, setPhone, getPhone, hiddenLoginMsg} = useContext(LoginStore)
	return (
		<View
			className="w-311 h-48  px-16 rounded-6 overflow-hidden flex"
			style={{
				backgroundColor: "rgba(255,255,255,0.6000)"
			}}
		>
			<Image
				src={imagesUrl + "icon/login-phone.png"}
				className="w-24 h-24 mt-12 mr-10"
			></Image>
			<Input
				value={getPhone}
				name="loginPhone"
				type="number"
				maxlength={13}
				adjust-position
				confirm-type="done"
				className="flex-1 h-full text-14 font-bold"
				placeholder="请输入手机号"
				placeholderClass="text-14 font-light text-info_unInput"
				onInput={e => {
					let {
						detail: {value}
					} = e
					hiddenLoginMsg()
					setPhone(value)
				}}
			></Input>
			{phone ? (
				<Image
					src={imagesUrl + "icon/login-recur.png"}
					className="w-24 h-24 mt-12"
					onClick={() => {
						setPhone("")
					}}
				></Image>
			) : null}
		</View>
	)
})
/**验证码获取按钮 */
const AuthCodeBtn: React.FC = observer((): JSX.Element => {
	const {
		replacePhone,
		changeMsg,
		sendAuthCodeBtnClick,
		isCountDownStart,
		countDownText,
		resetTimes
	} = useContext(LoginStore)

	resetTimes()

	return isCountDownStart ? (
		<View
			className="hanzi w-70 h-20 text-14 mt-14 text-right font-medium"
			onClick={() => {
				sendAuthCodeBtnClick()
				console.log(1)

				registerGetCode({userPhone: replacePhone})
					.then(res => {
						if (res.msg) {
							changeMsg(res.msg)
						}
					})
					.catch(err => {
						if (err && err.msg) {
							changeMsg(err.msg)
						}
					})
			}}
		>
			{countDownText}
		</View>
	) : (
		<View className="hanzi w-104 h-20 text-14 text-info_unInput text-right mt-14 font-medium truncate">
			{countDownText}
		</View>
	)
})
/**登录页验证码输入框 */
const AuthCodeInput: React.FC = observer((): JSX.Element => {
	const {setAuthCode, getAuthCode} = useContext(LoginStore)
	return (
		<View
			className="w-311 h-48 px-16 mt-24 rounded-6 flex relative"
			style={{
				backgroundColor: "#ffffff99"
			}}
		>
			<Image
				src={imagesUrl + "icon/login-authCode.png"}
				className="w-24 h-24 mt-12 mr-10"
			></Image>
			<Input
				value={getAuthCode}
				name="loginAuthCode"
				type="number"
				adjust-position
				confirm-type="done"
				className="flex-1 h-full text-14 font-bold"
				placeholder="请输入验证码"
				placeholderClass="text-14 font-light text-info_unInput"
				onInput={e => {
					let {
						detail: {value}
					} = e
					setAuthCode(value)
				}}
			></Input>
			<AuthCodeBtn></AuthCodeBtn>
			<AuthMsg></AuthMsg>
		</View>
	)
})
/**登录页提交按钮 */
const SubmitBtn: React.FC = observer((): JSX.Element => {
	const {checkAuthCode, checkPhone} = useContext(LoginStore)
	return (
		<Button
			className={`w-311 h-48 px-16 mt-48 rounded-6 border-0 overflow-hidden flex`}
			formType="submit"
			disabled={!checkAuthCode && !checkPhone}
			style={{
				backgroundColor: checkAuthCode && checkPhone ? "#fff" : "#ffffff99"
			}}
		>
			<View
				className={`w-72 h-22 leading-22 mt-13 mx-auto text-16 ${
					checkAuthCode && checkPhone ? "font-medium" : "text-info_unInput"
				}`}
			>
				登录·注册
			</View>
		</Button>
	)
})
/**登录页校验信息 */
const AuthMsg: React.FC = observer((): JSX.Element => {
	// 这里的判断等待接口调用后的返回状态来显示
	// 如果接口返回错误信息，此时再显示
	const {isShowLoginMsg, loginMsg} = useContext(LoginStore)
	return isShowLoginMsg ? (
		<View className="hanzi h-20 absolute left-8 -bottom-30 transform -translate-y-full text-14 font-normal text-white">
			{loginMsg}
		</View>
	) : (
		<></>
	)
})

const Login: React.FC = (): JSX.Element => {
	const {changeMsg, stopCountDown} = useContext(LoginStore)
	const {
		// userInfo: {userWeichatId},
		userInfo: {userYSJWeichatId},
		setUserInfo,
		changeIsLogin
	} = useContext(AppStore)

	// 对应 onShow
	useDidShow(() => {
		console.log("Login useDidShow")
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Login useDidHide")
		stopCountDown()
	})
	return (
		<View
			className="h-screen overflow-hidden"
			style={{
				backgroundImage: `url(${imagesUrl + "/login-bg.png"})`,
				backgroundSize: "100% 100%"
			}}
		>
			<MyNav color="#fff"></MyNav>
			<Logo></Logo>
			<Form
				className="block w-311 mx-auto mt-44"
				onSubmit={({detail: {value}}) => {
					let jsCode = getStorage("jsCode")
					if (!jsCode) {
						Taro.showToast({
							title: "登录失败！，错误码：0xjsCode",
							icon: "none"
						})
						return
					}
					Taro.showLoading({title: "登陆中"})
					const userPhone = value?.loginPhone.replace(/\s/g, "")
					const verfiyCode = value?.loginAuthCode
					let data = {
						userPhone,
						verfiyCode,
						weichatId: userYSJWeichatId,
						code: jsCode
					}
					console.log("#登录-注册", data)

					registerAppUser(data)
						.then(res => {
							changeIsLogin(true)
							setUserInfo(res.data)
							stopCountDown()
							toHome()
							Taro.hideLoading()
						})
						.catch(err => {
							if (err) {
								changeMsg(err.msg || "")
							}
							Taro.hideLoading()
						})
				}}
			>
				<PhoneInput></PhoneInput>
				<AuthCodeInput></AuthCodeInput>
				<SubmitBtn></SubmitBtn>
			</Form>
		</View>
	)
}
export default observer(Login)
